<!-- 这个文件是form的重置、提交、查询等等按钮组件 -->
<template>
    <a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
        <div style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
            <FormItem>
                <slot name="resetBefore"></slot>
                <Button
                    type="default"
                    class="mr-2"
                    v-bind="getResetBtnOptions"
                    @click="resetAction"
                    v-if="showResetButton"
                >{{ getResetBtnOptions.text }}</Button>

                <!-- 这个before的意思这些文本放在之前 -->
                <slot name="submitBefore"></slot>
                <Button
                    type="primary"
                    class="mr-2"
                    v-bind="getSubmitBtnOptions"
                    @click="submitAction"
                    v-if="showSubmitButton"
                >{{ getSubmitBtnOptions.text }}</Button>

                <slot name="advanceBefore"></slot>
                <Button type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
                    {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
                    <BasicArrow class="ml-1" :expand="!isAdvanced" up />
                </Button>
                <slot name="advanceAfter"></slot>
            </FormItem>
        </div>
    </a-col>
</template>


<script lang="ts">
import type { ColEx } from '../types/index';
//import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
import { defineComponent, computed, PropType } from 'vue';
import { Form, Col } from 'ant-design-vue';
import { Button, ButtonProps } from '/@/components/Button';
import { BasicArrow } from '/@/components/Basic';
import { useFormContext } from '../hooks/useFormContext';
import { useI18n } from '/@/hooks/web/useI18n';
import { propTypes } from '/@/utils/propTypes';

type ButtonOptions = Partial<ButtonProps> & { text: string };

export default defineComponent({
    name: 'BasicFormAction',
    // ？？ Col.name就是ACol, 带有前缀的是ant原始的组件,不带的是vben自定义组件,这个还有待确定？？
    components: {
        FormItem: Form.Item,
        Button,
        BasicArrow,
        [Col.name]: Col,
    },
    // props 的通过vue-types插件的类型定义
    props: {
        showActionButtonGroup: propTypes.bool.def(true),
        showResetButton: propTypes.bool.def(true),
        showSubmitButton: propTypes.bool.def(true),
        showAdvancedButton: propTypes.bool.def(true),
        resetButtonOptions: {
            type: Object as PropType<ButtonOptions>,
            default: () => ({}),
        },
        submitButtonOptions: {
            type: Object as PropType<ButtonOptions>,
            default: () => ({}),
        },
        actionColOptions: {
            type: Object as PropType<Partial<ColEx>>,
            default: () => ({}),
        },
        actionSpan: propTypes.number.def(6),
        isAdvanced: propTypes.bool,
        hideAdvanceBtn: propTypes.bool,
    },
    emits: ['toggle-advanced'],
    setup(props, { emit }) {
        const { t } = useI18n();

        const actionColOpt = computed(() => {
            const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
            const actionSpan = 24 - span;
            const advancedSpanObj = showAdvancedButton
                ? { span: actionSpan < 6 ? 24 : actionSpan }
                : {};
            const actionColOpt: Partial<ColEx> = {
                style: { textAlign: 'right' },
                span: showAdvancedButton ? 6 : 4,
                ...advancedSpanObj,
                ...actionColOptions,
            };
            return actionColOpt;
        });


        //重置,Ojbect.assign  是es6的合并函数,用来合并属性 assign(target, source1,source2...)
        const getResetBtnOptions = computed((): ButtonOptions => {
            return Object.assign(
                {
                    text: t('common.resetText'),
                },
                props.resetButtonOptions,
            );
        });

        // 查询
        const getSubmitBtnOptions = computed(() => {
            return Object.assign(
                {
                    text: t('common.queryText'),
                },
                props.submitButtonOptions,
            );
        });

        function toggleAdvanced() {
            emit('toggle-advanced');
        }

        return {
            t,
            actionColOpt,
            getResetBtnOptions,
            getSubmitBtnOptions,
            toggleAdvanced,
            ...useFormContext(),
        };
    },
});
</script>
